<template>
  <div class="father">
    <div class="head">
      <div class="search">
        <div class="item">
          <div class="item1">
            <img src="@/assets/tenlogo.jpg" width="100%" height="100%" opacity="0" alt="vamml">
          </div>
          <div class="item2">
            <router-link to="/r_search" width="100%" height="100%">
              <el-input
                :placeholder= "placeholders"
                prefix-icon="el-icon-search"
                id="search">
              </el-input>
            </router-link>
          </div>
          <div class="item3">
            <router-link to="/messages">
              <img src="@/assets/信息-01.png" alt="信息" width="100%" opacity="0.5">
            </router-link>
          </div>
        </div>
      </div>
      <div class="tabbar">
        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" text-color="#000" active-text-color="red" router padding="0" margin="0">
          <el-menu-item index="/real" class="el">华为</el-menu-item>
          <el-menu-item index="/h_walk" class="el">鸿蒙智行</el-menu-item>
          <el-menu-item index="/h_select" class="el">华为智选</el-menu-item>
          <el-menu-item index="/environment" class="el">生态周边</el-menu-item>
        </el-menu>
      </div>
    </div>
    <div class="body1">
    <transition name="fade">
      <div class="big-box">
    <div class="img-box">
      <div
        class="show-box"
        :style="{
          transform: 'translateX(' + translate + 'px)',
          transition: tsion ? 'all 0.5s' : 'none',
        }"
      >
         <img src="../assets/l3.jpg" alt="l3" />
        <img v-for="item in src" :key="item.index" :src="item.img" alt="src" />
      </div>
    </div>
    <div class="swiper-boxs" ref="swiper">
      <span v-for="item in src" :key="item.index"></span>
    </div>
<div class="group-1">
  <router-link to="/z_seven">
  <img src="../assets/icon/hongmeng.png" alt="hongmeng">
  </router-link>
  <router-link to="/rhua">
  <img src="../assets/icon/huawei.png" alt="huawei">
  </router-link>
  <router-link to="/rpei">
  <img src="../assets/icon/peijian.png" alt="peijian">
  </router-link>
  <img src="../assets/icon/qiye.png" alt="qiye">
  <img src="../assets/icon/qvanwu.png" alt="qvanwu">
  </div>
  <div class="group-2">
  <img src="../assets/icon/yingyin.png" alt="yingyin">
  <img src="../assets/icon/yundong.png" alt="yundong">
  <img src="../assets/icon/zhengzai.png" alt="zhengzai">
  <img src="../assets/icon/zhihui.png" alt="zhihui">
  <img src="../assets/icon/zhineng.png" alt="zhineng">
  </div>
  <div class="welfare">
    <h3 class="txt1">新人有礼 福利专区</h3>
    <h6 class="txt2">专属礼包  | 一分钟拼团抽奖 | 新人特惠</h6>
    <div class="icon-welfare">
   <img src="../assets/welfare/219.png" alt="219">
    <img src="../assets/welfare/389.png" alt="389">
     <img src="../assets/welfare/1.png" alt="1">
      <img src="../assets/welfare/11.png" alt="11">
    </div>
    <div class="suggest">
      <h3 class="txt3">甄选推荐</h3>
      <img src="../assets/suggest.png" alt="1">
    </div>
    </div>
  </div>
    </transition>
    </div>
  </div>
</template>

<script>

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'real',
  data () {
    return {
      src: [
        { img: require('../assets/l1.jpg') },
        { img: require('../assets/l2.jpg') },
        { img: require('../assets/l3.jpg') },
        { img: require('../assets/l4.jpg') }
      ],
      translateX: 0,
      tsion: true,
      activeIndex: '/real',
      count: 0,
      input2: '0',
      placeholders: '微泵液冷手机壳',
      data: ['微泵液冷手机壳', 'FreeBuds Pro 3', '平板', 'mate60', '微泵', '手机', 'gt 4', '充电宝', 'p60', '乐臻版', '微泵液冷手机壳', 'FreeBuds Pro 3', '平板', 'mate60', '微泵', '手机', 'gt 4', '充电宝', 'p60', '乐臻版', '微泵液冷手机壳', 'FreeBuds Pro 3', '平板', 'mate60', '微泵', '手机', 'gt 4', '充电宝', 'p60', '乐臻版']
    }
  },
  methods: {
    last () {
      this.translateX--
      this.tsion = true
      if (this.translateX < 0) {
        setTimeout(() => {
          this.tsion = false
          this.translateX = this.src.length - 1
        }, 500)
      }
    },
    next () {
      this.translateX++
      this.tsion = true
      if (this.translateX > this.src.length - 1) {
        setTimeout(() => {
          this.tsion = false
          this.translateX = 0
        }, 500)
      }
    },
    handleSelect (key, keyPath) {
      console.log(key)
      console.log(keyPath)
    },
    swiper (i) {
      this.translateX = i
    }
  },

  mounted () {
    setInterval(() => {
      this.next()
    }, 3000)
    setInterval(() => {
      this.count++
      if (this.count > this.data.length - 1) {
        this.count = 0
      }
      this.placeholders = this.data[this.count]
    }, 2000)
  },
  computed: {
    translate () {
      return -(this.translateX + 1) * 450
    }
  },

  watch: {
    translateX: {
      handler (val) {
        const a = this.$refs.swiper.querySelectorAll('span')
        a.forEach((element) => {
          element.style.width = '12px'
        })
        if (this.translateX < 0) {
          val = this.src.length - 1
        }
        if (this.translateX > this.src.length - 1) {
          val = 0
        }
        a[val].style.width = '100px'
      }
    }
  }
}

</script>

<style scoped>
.father{
  width: 450px;
  height: 100%;
  background-color: #fff;
}
.head{
  height: 15%;
  background-color:aqua;
}
.search{
  height: 60%;
  width: 100%;
  direction: horizontal;
   background-color: #fff;
}
.tabbar{
  height:40%;
  width: 100%;
}
.el{
  width: 25%;
}
.fade-enter{
  opacity: 0;
  transform: translateX(100%);
}
.fade-leave-to{
  opacity: 0;
  transform: translateX(-100%);
  position: absolute;
}
.fade-enter-active, .fade-leave-active {
  transition: all .5s ease;
}
.item{
  display: flex;
  height: 100%;
  background-color:#fff;
}
.item1{
  width: 30%;
  background: #fff;
}
.item2{
  width: 60%;
  padding-top: 10px;
  background-color: #fff;
}
.item3{
  padding:10px;
  margin-top: 5px;
  width: 10%;
  background-color: #fff;
}

span {
  margin: 0;
  padding: 0;
}
.big-box {
  width: 450px;
  height: 200px;
  background-color: #999;
  margin: 10px auto;
  /* position: absolute; */
}
.img-box {
  overflow: hidden;
  height: 100%;
  width: 100%;
}
.show-box {
  display: flex;
  height: 100%;
  width: 100%;
  transition: all 0.5s;
}
.show-box img {
  float: left;
  min-width: 450px;
  min-height: 200px;
}
.swiper-boxs {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.swiper-boxs span {
  float: left;
  width: 12px;
  height: 12px;
  background-color: white;
  border-radius: 50px;
  margin-left: 10px;
  cursor: pointer;
  transition: all 0.5s;
}
.swiper-boxs span:nth-child(1) {
  width: 100px;
}
.group-1,.group-2 {
  width: 450px;
  height: 80px;
  background-color: #f2f3f5;
}
.group-1 img,.group-2 img{
  margin-left: 15px;
}
.welfare{
  height: 180px;
  width: 400px;
  border-radius:30px;
  margin-left: 20px;
  background-color:#ffefe2 ;
   position: relative;
}
.suggest{
  height: 350px;
  width: 400px;
  border-radius:30px;
  margin-top: 30px;
  background-color:white ;
  position: relative;
}
.suggest img{
  margin-left: 20px;
}

.txt1{
  font-size: 15px;
  margin-left: 20px;
  margin-top: 10px;
  position: relative;
  top: 10px;
}
.txt2{
  color: #8b8b8a;
  font-size: 10px;
  margin-left: 20px;
  margin-top: 10px;
  position: relative;
}
.txt3{
  margin-top: 30px;
  margin-left: 20px;
  position: relative;
}
.icon-welfare{
  margin-top: -20px;
   margin-left: 35px;
  position: relative;
}
.body1{
  height: 75%;
  width: 450px;
  overflow-y: auto; /* 添加这一行以允许垂直滚动 */
  overflow-x: hidden;
  position: relative;
}
</style>
